<template>
	<view>
		<uni-nav-bar @clickLeft="$tab.back()" fixed="true" left-icon="left" backgroundColor="transparent" :title="`鹿票`"
			statusBar="true" :border="false" />

		<image src="https://file.fulewanjia.com/fulewanjia/profile/appImg/mine/deerticket_bg@2x.png" class="nav-img" mode="">
		</image>

		<view class="content px-32 absolute w-full">
			<view class="bg-FFF round-12 py-32 flex flex-col items-center px-20 shadow-20">
				<image src="https://file.fulewanjia.com/fulewanjia/profile/appImg/mine/xiala@2x.png" class="image-1" mode="">
				</image>
				<view class="my-28 box-1 w-full">

				</view>
				<input type="text" class="input-1 round-12 text-center" placeholder="请输入兑换码"
					placeholder-style="color:#7B371C;" v-model="redemptionCode" />
				<view class="box-2 bg-theme round-16 text-center text-FFF mt-32" @click="exchange">
					点击兑换
				</view>
			</view>

			<view class="text-32 my-32 font-700">
				鹿票总额
			</view>

			<view class="box-3 round-16 mt-40 flex items-center justify-between px-32"
				v-for="(item,index) in userRichInfo" :key="index" :style="{
				background:`${styleList[index].back}`,
				color:`${styleList[index].color}`
			}" @click="goDetail(item)">
				<view class="">
					<view class="text-36 text-333 font-700">
						{{item.amount}}
					</view>
					<view class="text-24 mt-20">
						{{item.moneyName}}
					</view>
				</view>
				<view class="flex items-center flex-col">
					<view class="flex items-center">
						<view class="text-28">
							明细
						</view>
						<u-icon name="arrow-right" :color="styleList[index].color"></u-icon>
					</view>
					<view class="bg-theme px-32 py-12 round-8 text-FFF mt-16" v-if="item.moneyType.isOpen"
						@click.stop="exchageClick(item)">
						兑换
					</view>
				</view>
			</view>
		</view>

		<Exchange :show="isExchange" :moneyId="moneyId" :residue="residue" :exchangeName="exchangeName"
			@close="exchangeClose"></Exchange>
	</view>
</template>

<script>
	import {
		throttle
	} from 'throttle-debounce';
	var thro;
	export default {
		data() {
			return {
				redemptionCode: null,
				styleList: [{
						back: "#FFD981",
						color: "#934448"
					},
					{
						back: "#D1EE77",
						color: "#A78B2D"
					},
					{
						back: "#FFDFD0",
						color: "#E87C4A"
					}
				],
				userRichInfo: [],
				isExchange: false,
				moneyId: "",
				residue: "",
				exchangeName: ""
			};
		},
		onShow() {
			thro = this
			this.getData()
		},
		methods: {
			goDetail(item) {
				if (item.moneyName == '转化鹿票') {
					this.$tab.nav(`/pages/mine/currency/transformDeer?id=${item.moneyId}`)
				} else {
					this.$tab.nav(`/pages/mine/currency/deerTicketDetail?id=${item.moneyId}&title=${item.moneyName}`)
				}
			},
			exchangeClose() {
				this.getData()
				this.isExchange = false
			},
			async getData() {
				const userRichInfo = await this.$Api.user.userRichInfo()

				userRichInfo.data.forEach(item => {
					item.amount = item.amount.toFixed(2)
				})

				this.userRichInfo = userRichInfo.data.filter(item => {
					return item.moneyName == '可交易鹿票' || item.moneyName == '待持鹿票' || item.moneyName == '转化鹿票'
				})

				console.log(this.userRichInfo)
			},
			exchange: throttle(2000, () => {
				thro.$Api.currency.useCode({
					code: thro.redemptionCode
				}).then(res => {
					thro.$modal.msg(res.msg)
					thro.redemptionCode = ""
				}).catch(err => {
					thro.redemptionCode = ""
				})
			},{
				noTrailing:true
			}),
			exchageClick(item) {
				this.moneyId = item.moneyId
				this.residue = item.amount
				this.exchangeName = item.moneyName
				this.isExchange = true
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F8F8F8;
	}

	/deep/ .uni-navbar {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		z-index: 9;
	}

	.nav-img {
		width: 100%;
		height: 600rpx;
	}

	.content {
		top: 404rpx;
		left: 0;

		.image-1 {
			width: 528rpx;
			height: 32rpx;
		}

		.box-1 {
			height: 0;
			border: 1rpx dashed #D1D1D1;
		}

		.input-1 {
			width: 558rpx;
			height: 80rpx;
			background: #F7FFF6;
			border: 2rpx solid #838383;
			line-height: 80rpx;
		}

		.box-2 {
			width: 352rpx;
			height: 80rpx;
			line-height: 80rpx;
		}

		.box-3 {
			height: 176rpx;
		}
	}
</style>